<template>
<!--  trigger="click" 点击事件 不需要，只要鼠标 悬停 就显示-->
  <el-dropdown  class="custom-tree-menu" size="small">
    <i class="el-icon-more rotate " />
    <el-dropdown-menu slot="dropdown">
<!--      -->
      <el-dropdown-item v-for='(item,index) in events' :key="index" :divided="index >0" @click.native="clickMenu(item)" >
<!--        {{item.label}}-->
<!--       跟节点 不可删除-->
        <span>  {{item.label}} </span>

<!--       <span v-for="(items,index) in data.data " :key="index"  v-if="!items.isEdit" >  {{item.label}} </span>-->

      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
  export default {
    name:'DotDropdown',
    props: {
      events: {
        type: Array,
        default: function() {
          return [
            {
              label: '新建同级',
              funcName: 'addNode'
            },
            {
              label: '编辑',
              funcName: 'editNode'
            },
            {
              label: '删除',
              funcName: 'deleteNode'
            }
          ]
        }
      },
      // 注入数据
      data: {
        type: Object
      }
    },
    methods: {
      clickMenu(item) {
        // 传给 父组件参数
        this.$emit('dotEvents', this.data,item)
      }
    }
  }
</script>


<style  scoped>
  .el-icon-more:before {
    content: "\E794";
    color: #c0c4cc;
    font-size: 20px;

  }
  .rotate {
    cursor: pointer;
    margin-left: 20px;
    transform: rotate(90deg);
  }
  .rotate:focus {
    width: 20px;
    height: 20px;
    border-radius: 4em;
    background-color: rgba(130, 132, 138, 0.2);
  }


</style>


